<template>
  <div style="font-size: 0.35rem">
    <p style="text-align: center; margin-top: 0.5rem">
      <span @click="out" style="float: left; margin-left: 0.2rem"><</span
      >修改昵称
    </p>
    <van-notice-bar
      wrapable
      left-icon="volume-o"
      :scrollable="false"
      text="为保护您的隐私，您的昵称将用于社区交流和医患沟通"
      style="font-size: 0.35rem"
    />
    <p
      style="
        padding-left: 0.5rem;
        margin-top: 0.5rem;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
        width: 100%;
        height: 1rem;
        line-height: 1rem;
      "
    >
      昵称
      <input
        type="text"
        v-model="nc"
        style="
          width: 80%;
          float: right;
          height: 0.9rem;
          line-height: 0.9rem;
          margin-top: 0.05rem;
          border: none;
        "
      />
    </p>
    <p
      style="
        font-size: 0.25rem;
        padding-left: 0.5rem;
        color: #c1c1c1;
        margin-top: 0.2rem;
      "
    >
      昵称限制10个汉字或20个字母、数字
    </p>
    <p>
      <button
        style="
          width: 80%;
          height: 1rem;
          background: #1167e7;
          color: #fff;
          border-radius: 0.1rem;
          border: none;
          margin-left: 10%;
          margin-top: 0.5rem;
        "
        @click="qr"
      >
        确认修改
      </button>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 点击返回上一级（系统设置）
const out = () => {
  router.push('/ding/users')
}

const nc = ref('')
const qr = () => {
  const ncnn = localStorage.setItem('nc', nc.value)
  const nm=nc.value
  console.log(nm)
  router.push('/ding/users')
}
</script>

<style scoped></style>
